<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class=" ">
            <el-button type="primary" @click="visbleAdd">添加分类</el-button>
            <tree-table class="table" :expand-type="false" show-index index-text="#" border
                :data="data" :columns="columns" :selection-type="false">
                <template slot="isdel" slot-scope="scope">
                    <i v-if="scope.row.cat_deleted===false" class="el-icon-success"></i>
                    <i v-else class="el-icon-error"></i>
                </template>    
                <template slot="DJ" slot-scope="scope">
                    <el-tag type="primary" v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag type="success" v-else-if="scope.row.cat_level === 1">二级</el-tag>
                    <el-tag type="warning" v-else>三级</el-tag>
                </template>  
                <template slot="caozuo" slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit" @click="editCate(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete" @click="delCate(scope.row)">删除</el-button>
                </template>
            </tree-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="getCate.pagenum"
                :page-sizes="[1, 5, 10]"
                :page-size="getCate.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- 添加分类对话框 -->
        <el-dialog  title="添加分类" :visible.sync="AdddialogVisible" width="50%" :before-close="closeAdd">
            <el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类">
                    <el-cascader :props="cascaderCate" clearable change-on-select v-model="selc_cateID" :options="allData" expand-trigger='hover'  @change="CateChange">
                    </el-cascader>
                </el-form-item>
                
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeAdd">取 消</el-button>
                <el-button type="primary" @click="AddTrue">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑分类对话框 -->
        <el-dialog  title="编辑分类" :visible.sync="EditdialogVisible" width="50%" :before-close="closeEdit">
            <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="editForm.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeEdit">取 消</el-button>
                <el-button type="primary" @click="EditTrue">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                AdddialogVisible:false,
                EditdialogVisible:false,
                getCate:{
                    pagenum:1,
                    pagesize:5
                },
                total:0,
                data: [],
                allData:[],
                columns: [
                    {
                        label: '分类名称',
                        prop: 'cat_name'
                    },
                    {
                        label: '是否有效',
                        type: 'template',
                        template: 'isdel'
                    },
                    {
                        label: '排序',
                        prop: 'cat_level',
                        type:'template',
                        template:'DJ'
                    },
                    {
                        label: '操作',
                        type: 'template',
                        template: 'caozuo'
                    }
                ],
                rules:{
                    cat_name: [
                        { required: true, message: '请输入分类名称', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ]
                },
                addForm:{
                    cat_pid:0,
                    cat_name:'',
                    cat_level:0
                },
                selc_cateID:[],
                cascaderCate:{
                    value:'cat_id',
                    label:'cat_name',
                    children:'children'
                    
                },
                editForm:{
                    cat_id:0,
                    cat_name:''
                },
                YZname:'',
                del_ID:0
            }
        },
        created(){
            this.getCateList()
        },
        methods:{
            // 页面一加载获取数据的函数
            async getCateList(){
                const {data:res} = await this.$http.get('/categories',{params:this.getCate})
                if(res.meta.status !== 200) return this.$message.error('获取分类列表失败~')
                this.data = res.data.result
                this.total = res.data.total
            },
            // 编辑按钮处理函数
            editCate(data){
                this.YZname = ''
                this.YZname = data.cat_name
                this.editForm.cat_name = data.cat_name
                this.editForm.cat_id = data.cat_id
                this.EditdialogVisible = true
            },
            // 删除按钮处理函数
            async delCate(data){
                this.del_ID = data.cat_id
                const res = await this.$confirm('此操将删除该分类, 是否继续?', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).catch(()=>{})
                if(res !== 'confirm') return this.$message.info('已取消删除~')
                const {data:del} = await this.$http.delete('/categories/'+this.del_ID)
                if(del.meta.status !== 200) return this.$message.error('删除失败!稍后再试试吧~')
                this.$message.success('删除成功了~')
                this.del_ID = 0
                this.getCateList() 
            },
            // 改变当前页面数据条数的函数
            handleSizeChange(size){
                this.getCate.pagesize = size
                this.getCateList()
            },
            // 改变当前页的函数
            handleCurrentChange(num){
                this.getCate.pagenum = num
                this.getCateList()
            },
            // 关闭添加分类对话框
            closeAdd(){
                this.AdddialogVisible = false
                this.$refs.addForm.resetFields()
                this.selc_cateID = []
            },
            // 显示添加分类对话框
            async visbleAdd(){
                this.AdddialogVisible = true
                const {data:res} = await this.$http.get('/categories',{params:{type:2}})
                if(res.meta.status !== 200) return this.$message.error('获取分类列表失败~')
                this.allData = res.data
            },
            // 添加分类对话框内 确认添加按钮
            AddTrue(){
                this.$refs.addForm.validate(async valid=>{
                    if(!valid) return this.$message.error('请输入正确的信息哦~')
                    const {data:res} = await this.$http.post('/categories',this.addForm)
                    if(res.meta.status !== 201) return this.$message.error('添加分类失败了!稍后再试试~')
                    this.$message.success('添加分类成功~')
                    this.getCateList()
                    this.AdddialogVisible = false
                })
            },
            //级联选择框改变触发的函数
            CateChange(){
                this.addForm.cat_level = 0
                this.addForm.cat_pid = 0
                if(this.selc_cateID.length !== 0){
                    this.addForm.cat_level = this.selc_cateID.length
                    this.addForm.cat_pid = this.selc_cateID[this.selc_cateID.length - 1]
                }   
            },
            //编辑对话框关闭按钮处理事件
            closeEdit(){
                this.EditdialogVisible = false
                this.$refs.editForm.resetFields()
            },
            //编辑对话框确认编辑按钮处理事件
            EditTrue(){
                this.$refs.editForm.validate(async valid=>{
                    if(!valid) return this.$message.error('请正确的编辑哦~')
                    const {data:res} = await this.$http.put('/categories/'+this.editForm.cat_id,{cat_name:this.editForm.cat_name})
                    if(res.meta.status !== 200) return this.$message.error('更新分类失败了!稍后再试吧~')
                    this.$message.success('更新分类成功~')
                    this.getCateList()
                    this.EditdialogVisible = false
                })
            }
        }
    
    }
</script>

<style lang="less" scoped>
    .table {
        margin-top: 15px;
    }
    .el-icon-success {
        color:green;
    }
    .el-cascader {
        width: 100%;
    }
</style>